<%-- 
    Document   : userManager
    Created on : 2016-6-30, 19:42:14
    Author     : cxhd
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="../../link.jsp" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!--<script type="text/javascript" src="${base}/appjs/registerListModule.js" ></script>-->
    </head>
    <style>
        .error{font-size: 1px; color: red}
    </style>

    <body ng-app="userManage" ng-controller="mainCtrl" style="padding-top: 10px;">

        <!--        <div class="am-cf am-padding am-padding-bottom-0">
                    <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">用户管理列表</strong> / <small>User list</small></div>
                </div>-->
        <!--        <hr>-->

        <div class="col-lg-12">
            <div class="panel panel-default" style="overflow: hidden">

                <div class="panel-heading"><span style="float: left">用户列表</span>
                    <div>
                        <input ng-model="searchContent" ng-model="name2" placeholder="名字/ID" style="width:320px; float: left;margin-left: 20px" class="form-control input-sm" />
                        <button ng-click="getList()" style="float: left" class="btn btn-success btn-sm"><span class="fa fa-search"></span>&nbsp;&nbsp;搜索</button>

                        <button ng-click="addUser()" style="margin-left: 30px;float: left" class="btn btn-info btn-sm"><span class="fa fa-send"></span>&nbsp;&nbsp;添加</button></div>

                    <div style="clear: both"></div>
                </div>

                <table class="table table-striped table-bordered  table-hover ">
                    <thead>
                        <tr>
                            <th class="table-id">用户ID</th>
                            <th class="table-title">用户名字</th>
                            <th class="table-type">性别</th>
                            <th class="table-author am-hide-sm-only">生日</th>
                            <th class="table-date am-hide-sm-only">部门</th>
                            <th class="">电话</th>
                            <th class="">角色</th>
                            <th class="">签名</th>
                            <th class="table-set">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="list in userlists" ng-click='selectPatient(list)'>

                            <td>{{list.user_id}}</td>
                            <td>{{list.name}}</td>
                            <td>{{list.sex}}</td>
                            <td class="am-hide-sm-only">{{list.birth}}</td>
                            <td class="am-hide-sm-only">{{list.department}}</td>
                            <td class="am-hide-sm-only">{{list.phone}}</td>
                            <td class="am-hide-sm-only">{{list.description}}</td>
                            <td class="am-hide-sm-only">
                                <img style="" width="90px" ng-show="list.sign" ng-src="{{list.sign}}" />
                            </td>
                            <td>
                                <div class="am-btn-toolbar">
                                    <div class="am-btn-group am-btn-group-xs">

                                        <button ng-click="editPW(list)"  class="btn btn-success btn-xs"><span class="fa fa-edit"></span>&nbsp;修改密码</button>

                                        <button ng-click="updateUser(list)"  class="btn btn-success btn-xs"><span class="fa fa-edit"></span>&nbsp;修改</button>
                                        <button ng-click="deleteUser(list)" class="btn btn-danger btn-xs"><span class="fa fa-bolt"></span>&nbsp;删除</button>


                                    </div>
                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>
                <pagination ng-change="pageChanged()" previous-text="上一页" next-text="下一页" first-text="第一页" last-text="最后一页" ng-model="data.currentPage" items-per-page="data.pageSize" total-items="data.bigTotalItems" ng-model="data.bigCurrentPage" max-size="data.maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>

            </div>

        </div>


        <!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>-->

        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">


                    <!--  <label name="email">Your email</label>
                      <input type="email" name="email" ng-model="email" placeholder="Email Address" />-->

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="deteleInfo()"><span aria-hidden="true">&times;</span></button>
                        <h3 class="modal-title" id="myModalLabel" style="text-align:center ;">{{title}}用户</h3>
                    </div>
                    <div class="modal-body">
                        <form name="form"  class="form-validation"> 
                            <table style="width: 100%" class="cx-table">
                                <tr>
                                    <td>登录名:</td>
                                    <td> <input  type="text" class="form-control"  ensure-unique="user_id"  name="user_id" ng-model="user.user_id" ng-minlength=3 ng-maxlength=10 required>
                                        <!--用户名验证-->
                                        <div class="error" ng-show="form.user_id.$dirty && form.user_id.$invalid">
                                            <small class="error" ng-show="form.user_id.$error.required">登录名不能为空。</small>
                                            <small class="error" ng-show="form.user_id.$error.minlength">登陆名长度不能小于3</small>
                                            <small class="error" ng-show="form.user_id.$error.maxlength">登录名长度不能大于10</small> 
                                            <small class="error" ng-show="form.user_id.$error.pattern">登录名由字母和数字组成</small> 
                                            <small class="error" ng-show="form.user_id.$error.unique">登录名已经被注册</small>  
                                        </div>
                                    </td>

                                    <td>密码:</td>
                                    <td><input type="password" class="form-control"  name="password" ng-model="user.password" ng-minlength=3 ng-maxlength=20 required>
                                        <div class="error" ng-show="form.password.$dirty && form.password.$invalid">
                                            <small class="error" ng-show="form.password.$error.required">密码不能为空。</small>
                                            <small class="error" ng-show="form.password.$error.minlength">密码长度不能小于3</small>
                                            <small class="error" ng-show="form.password.$error.maxlength">密码不能大于20</small>                            
                                        </div>
                                    </td>
                                    <td>确认密码:</td>
                                    <td>
                                        <input type="password" class="form-control" name="confirm_password" ng-model="confirm_password" ui-validate="'$value==user.password'" ui-validate-watch="user.password" ng-minlength=3 ng-maxlength=30 required>
                                        <div class="error" ng-show="form.confirm_password.$dirty && form.confirm_password.$invalid">
                                            <small class="error" ng-show="form.confirm_password.$error.required">密码不能为空。</small>
                                            <small class="error" ng-show="form.confirm_password.$error.validator">两次密码不一致</small>
                                            <!--<small class="error" ng-show="form.password.$error.maxlength">密码不能大于20</small>-->                            
                                        </div>
                                    </td>
                                </tr>
                                <tr>                             
                                    <td>
                                        用户名字:
                                    </td>
                                    <td>
                                        <input type="text" class="form-control"ng-model="user.name">
                                    </td>
                                    <td>性别：</td>
                                    <td>
                                        <input type="radio"  name="sex" id="nan" ng-model="user.sex" value="1" class="xb"  ><label for="nan">男</label>
                                        <input type="radio"  name="sex" value="2" ng-model="user.sex" class="xb" id="nv"><label for="nv">女</label></td>
                                    <td>生日:</td>
                                    <td>
                                        <input type="text" class="form-control"ng-model="user.birth">                           

                                    </td>



                                </tr>
                                <tr>
                                    <td>部门:</td>
                                    <td><input type="text" class="form-control" ng-model="user.department"></td>
                                    <td>角色:</td>
                                    <td>
                                <ui-select ng-model="user.position" theme="bootstrap">
                                    <ui-select-match placeholder="">{{$select.selected.description}}</ui-select-match>
                                    <ui-select-choices repeat="item in roles | filter: $select.search">
                                        <div ng-bind="item.description | highlight: $select.search"></div>

                                    </ui-select-choices>
                                </ui-select>

                                <!--<input type="text" class="form-control" ng-model="user.position"></td>-->
                                <td>身份证：</td>
                                <td><input type="text" class="form-control" ng-model="user.card_no"></td>
                                </tr>
                                <tr>
                                    <td>
                                        手机号:
                                    </td>
                                    <td>
                                        <input type="text" name="phone" ng-pattern="/^1[3|4|5|7|8]\d{9}$/"  class="form-control"  ng-model="user.phone">
                                        <div class="error" ng-show="form.phone.$dirty && form.phone.$invalid">

                                            <small class="error" ng-show="form.phone.$error.pattern">格式不正确</small>
                                            <!--<small class="error" ng-show="form.password.$error.maxlength">密码不能大于20</small>-->                            
                                        </div>
                                    </td>
                                    <td>地址:</td>
                                    <td colspan="3">
                                        <!--<div class="input-group has-success">-->
                                        <input type="text" class="form-control"ng-model="user.address">
                                        <!--</div>-->




                                    </td>
                                </tr>

                            </table>
                        </form>
                    </div>
                    <div class="modal-footer" >
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deteleInfo()">取消</button>
                        <button type="button" class="btn btn-primary" ng-disabled="form.$invalid" ng-click="saveUserInfo()" >保存</button>

                    </div>
                    </form>
                </div>
            </div>

        </div>



        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="editModal">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">



                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="deteleInfo()"><span aria-hidden="true">&times;</span></button>
                        <h3 class="modal-title" id="myModalLabel" style="text-align:center ;">{{title}}用户</h3>
                    </div>
                    <div class="modal-body">
                        <form class="form-validation" name="editFrom"> 
                            <table style="width: 100%" class="cx-table">
                                <tr>
                                    <td>登录名:</td>
                                    <td> <input  disabled="true" type="text" class="form-control"  ensure-unique="user_id"  name="user_id" ng-model="e_user.user_id" ng-minlength=3 ng-maxlength=10 required>
                                        <!--用户名验证-->
                                        <!--                                            <div class="error" ng-show="editFrom.e_user.$dirty && editFrom.e_user.$invalid">
                                                                                        <small class="error" ng-show="editFrom.e_user.$error.required">登录名不能为空。</small>
                                                                                        <small class="error" ng-show="editFrom.e_user.$error.minlength">登陆名长度不能小于3</small>
                                                                                        <small class="error" ng-show="editFrom.e_user.$error.maxlength">登录名长度不能大于10</small> 
                                                                                        <small class="error" ng-show="editFrom.e_user.$error.pattern">登录名由字母和数字组成</small> 
                                                                                        <small class="error" ng-show="editFrom.e_user.$error.unique">登录名已经被注册</small>  
                                                                                    </div>-->
                                    </td>
                                    <td>
                                        用户名字:
                                    </td>
                                    <td>
                                        <input type="text" class="form-control"ng-model="e_user.name">
                                    </td>

                                </tr>
                                <tr>                             

                                    <td>性别：</td>
                                    <td>
                                        <input type="radio"  name="sex" id="nan" ng-model="e_user.sex" value="1" class="xb"  ><label for="nan">男</label>
                                        <input type="radio"  name="sex" value="2" ng-model="e_user.sex" class="xb" id="nv"><label for="nv">女</label></td>
                                    <td>生日:</td>
                                    <td>
                                        <input type="text" class="form-control"ng-model="e_user.birth">                           

                                    </td>



                                </tr>
                                <tr>
                                    <td>部门:</td>
                                    <td><input type="text" class="form-control" ng-model="e_user.department"></td>
                                    <td>角色:</td>
                                    <td>
                                <ui-select ng-model="e_user.position" theme="bootstrap">
                                    <ui-select-match placeholder="">{{$select.selected.description}}</ui-select-match>
                                    <ui-select-choices repeat="item in roles | filter: $select.search">
                                        <div ng-bind="item.description | highlight: $select.search"></div>

                                    </ui-select-choices>
                                </ui-select>

                                <!--<input type="text" class="form-control" ng-model="user.position"></td>-->

                                </tr>
                                <tr>
                                    <td>身份证：</td>
                                    <td><input type="text" class="form-control" ng-model="e_user.card_no"></td>
                                    <td>
                                        手机号:
                                    </td>
                                    <td>
                                        <input type="text" name="phone" ng-pattern="/^1[3|4|5|7|8]\d{9}$/"  class="form-control"  ng-model="e_user.phone">
                                        <div class="error" ng-show="editFrom.phone.$dirty && form.phone.$invalid">

                                            <small class="error" ng-show="editFrom.phone.$error.pattern">格式不正确</small>
                                            <!--<small class="error" ng-show="form.password.$error.maxlength">密码不能大于20</small>-->                            
                                        </div>
                                    </td>

                                </tr>
                                <tr>
                                    <td>地址:</td>
                                    <td colspan="3">
                                        <!--<div class="input-group has-success">-->
                                        <input type="text" class="form-control"ng-model="e_user.address">
                                        <!--</div>-->




                                    </td>
                                </tr>
                                <tr>
                                    <td>签名:</td>
                                    <td colspan="3">
                                        <div  ng-click="mySign()" id="mySign"  style="width:188px;height: 68px;border:1px #000 solid">
                                            <input style="display: none" id="sign" type="file">
                                            <span ng-hide="e_user.sign" style="line-height: 68px;">点击添加签名</span>
                                            <img ng-show="e_user.sign" ng-src="{{e_user.sign}}">
                                        </div>





                                    </td>
                                </tr>

                            </table>
                        </form>
                    </div>
                    <div class="modal-footer" >
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deteleInfo()">取消</button>
                        <button type="button" class="btn btn-primary" ng-disabled="editFrom.$invalid" ng-click="saveEditUserInfo()" >保存</button>

                    </div>

                </div>
            </div>

        </div>




        <!--修改密码窗口-->
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myeditpwModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">


                    <!--  <label name="email">Your email</label>
                      <input type="email" name="email" ng-model="email" placeholder="Email Address" />-->

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true">&times;</span></button>
                        <h3 class="modal-title" id="myModalLabel" style="text-align:center ;">修改密码</h3>
                    </div>
                    <div class="modal-body">
                        <form  name="myeditpw" class="form-validation"> 
                            <table style="width: 100%" class="cx-table">
                                <tr>


                                    <td>新密码:</td>
                                    <td><input type="password" class="form-control"  name="password" ng-model="password" ng-minlength=3 ng-maxlength=20 required>
                                        <div class="error" ng-show="myeditpw.password.$dirty && myeditpw.password.$invalid">
                                            <small class="error" ng-show="myeditpw.password.$error.required">密码不能为空。</small>
                                            <small class="error" ng-show="myeditpw.password.$error.minlength">密码长度不能小于3</small>
                                            <small class="error" ng-show="myeditpw.password.$error.maxlength">密码不能大于20</small>                            
                                        </div>
                                    </td>

                                </tr>
                                <tr>
                                    <td>确认密码:</td>
                                    <td>
                                        <input type="password" class="form-control" name="confirm_password2" ng-model="confirm_password2" ui-validate="'$value==password'" ui-validate-watch="password" ng-minlength=3 ng-maxlength=30 required>
                                        <div class="error" ng-show="myeditpw.confirm_password2.$dirty && form.confirm_password2.$invalid">
                                            <small class="error" ng-show="myeditpw.confirm_password2.$error.required">密码不能为空。</small>
                                            <small class="error" ng-show="myeditpw.confirm_password2.$error.validator">两次密码不一致</small>
                                            <!--<small class="error" ng-show="form.password.$error.maxlength">密码不能大于20</small>-->                            
                                        </div>
                                    </td>
                                </tr>


                            </table>
                        </form>
                    </div>
                    <div class="modal-footer" >
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deteleInfo()">取消</button>
                        <button type="button" class="btn btn-primary" ng-disabled="myeditpw.$invalid" ng-click="sureSave()" >确定</button>

                    </div>

                </div>
            </div>

        </div>
    </div>

</body>
</html>
<script>
    var app = angular.module("userManage", ['baseModule', 'ui.validate', 'ui.select']);
    app.controller("mainCtrl", function ($scope, base) {
        $scope.user = {};
        $scope.getUsers = function () {//显示用户信息
            base.post("userList/getUserList").get(function (data) {

                if (data) {
                    $scope.userlists = data;
                    for (var tmp in $scope.userlists) {
                        if ($scope.userlists[tmp].sex == 1) {
                            $scope.userlists[tmp].sex = '男';
                        } else {
                            $scope.userlists[tmp].sex = '女';
                        }
                    }

                }
            })
        }



        $scope.getUsers(); //显示用户


        $scope.getRole = function () {

            base.post("userList/getRole", {}).get(function (data) {

                $scope.roles = data;
            });
        }
        $scope.init = function () {
            $scope.getRole();
        }

        $scope.addUser = function () {//打开新增窗口
            $scope.title = "新增";
            $("#nan").attr("checked", true);
            $('#myModal').modal({
                show: true,
                backdrop: true
            })
        };
        $scope.updateUser = function (tmp) {//打开修改窗口
            $scope.title = "修改";
            $scope.e_user = tmp;
            $scope.e_user.sex = (tmp == "男" ? "1" : "2");
            for (i in $scope.roles) {
                if (tmp.position == $scope.roles[i].name) {
                    $scope.e_user.position = $scope.roles[i];
                    break;
                }
            }
            console.log($scope.e_user);

            $('#editModal').modal("show");
        }
        $scope.editPW = function (item) {
//            console.log(item);
            $scope.user_edit_pk = item.pk;
            $scope.user_edit_id = item.user_id;
            $("#myeditpwModal").modal("show");
        }
        $scope.sureSave = function () {
            base.post("userList/editpw", {pk: $scope.user_edit_pk, user_id: $scope.user_edit_id, pw: $scope.password}).get(function (data) {
                if (data == 'true') {
                    steveAl("修改成功", 1000);
                    $("#myeditpwModal").modal("hide");
                } else {
                    steveAl("修改成功", 1000);
                }
            })
        }
        $scope.user.pk = "";
        $scope.saveUserInfo = function () {

            if ($scope.user.position) {
                $scope.user.position = $scope.user.position.name;
            }
            base.post("userList/addUser", $scope.user).get(function (data) {
                if (data == 'true') {
                    steveAl("添加成功", 1000);
                    $("#myModal").modal("hide");
                    $scope.getUsers();
                }
            });

        }

        $scope.saveEditUserInfo = function () {
            if ($scope.e_user.position) {
                $scope.e_user.position = $scope.e_user.position.name;
            }
            base.post("userList/editUser", $scope.e_user).get(function (data) {
                if (data == 'true') {
                    steveAl("修改成功", 1000);
                    $("#editModal").modal("hide");
                    $scope.getUsers();
                }
            });
        }

        $scope.deleteUser = function (list) {

            steveConfrim("确定删除吗？", function () {
                base.post("userList/deleteUser", {pk: list.pk}).get(function (data) {
                    if (data == 'true') {
                        steveAl("删除成功！", 1000);
                        $scope.getUsers();
                    }
                });
            });
        };

        $scope.mySign = function(){
            setTimeout(function(){
                 $("#sign").click();
            },100)
        }
        $("#sign").change(function (event) {
            var tar = event.target;
            var file = tar.files[0];
            //判断类型是不是图片  
            if (!/image\/\w+/.test(file.type)) {
                alert("请确保文件为图像类型");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                console.log(this.result);
                // 这里是BASE64字符串
                $scope.e_user.sign = this.result;
                $scope.$apply();
                //alert(this.result); //就是base64  

            }
        })
        $scope.init();
        //注意每当模态框关闭或保存后  要清理原有的数据
//          $scope.saveUserInfo=function(){
//              if($scope.pk!=""){//修改操作
//                   $.post("",{},function(){
//                      
//                  })
//              }else{//保存操作
//                  $.post("",{},function(){
//                      
//                  })
//              }
//          }
    });
    app.directive('ensureUnique', function (base) {
        return {
            require: 'ngModel',
            link: function (scope, ele, attrs, c) {
                var processObj;
                ele.keydown(function () {
                    if (processObj) {
                        clearTimeout(processObj);
                        processObj = 0;
                    }
                    processObj = setTimeout(function () {
                        var val = c.$viewValue;
                        if ($.trim(val) != "") {
                            base.post("userList/checkUserId", {userId: val}).get(function (data) {
                                if (data == "true") {
                                    c.$setValidity('unique', false);
                                } else if (data == "false") {
                                    c.$setValidity('unique', true);
                                }
                            })
                        }

                    }, 1000);
                })
//                scope.$watch(attrs.ngModel, function () {
//                    $http({
//                        method: 'POST',
//                        url: '/api/check/" + attrs.ensureUnique,
//                                data: {'field': attrs.ensureUnique}
//                    }).success(function (data, status, headers, cfg) {
//                        c.$setValidity('unique', data.isUnique);
//                    }).error(function (data, status, headers, cfg) {
//                        c.$setValidity('unique', false);
//                    });
//                });
            }
        }
    });
    //验证

</script>
